import { useRepoStore } from '../../store/repos'
import { useEffect } from 'react'

const RepoList = () => {
    const {
        repos,
        loading,
        error,
        fetchRepos
    } = useRepoStore()
    useEffect(() => {
        fetchRepos('fogletter')
    }, [])
    if (loading) {
        return (
            <div>
                <h2>Repo List</h2>
                <p>Loading...</p>
            </div>
        )
    }
    if (error) {
        return (
            <div>
                <h2>Repo List</h2>
                <p>Error: {error}</p>
            </div>
        )
    }
    return (
        <div>
            <h2>Repo List</h2>
            <ul>
                {repos.map((repo) => (
                    <li key={repo.id}>
                        <a href={repo.html_url } target="_blank" rel="noreferrer">{repo.name}</a>
                        <p>{repo.description || 'No description'}</p>
                    </li>
                ))}
            </ul>
        </div>
    )
}

export default RepoList